<template>
  <a-modal
    class="announcementCustomModal"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle ="bodyStyle"
    @cancel="handleCancel"
    destroyOnClose
    :footer="null">
    <!--全屏按钮 -->
    <template slot="title">
      <a-button icon="fullscreen" class="custom-btn" @click="handleClickToggleFullScreen"/>
    </template>
    <a-card class="daily-article">
      <a-card-meta
        :title="record.titile"
        :description="'设备ID：'+record.id + ' 设备名称： ' + record.deviceName + ' 设备类型： ' +record.deviceType+' 设备描述： '+record.description ">

      </a-card-meta>
      <!--<a-divider />
      <span v-html="record.msgContent" class="article-content"></span>-->
    </a-card>
 
     <a-card class="daily-article" >
		 接口详情
    </a-card>           
    <a-table
    	ref="table4"
			size="middle"
      :columns="innerColumns4"
      :dataSource="innerData4"
      :pagination="false"
      :loading="loading4"
      rowKey="id"
      @change="handleTableChange4"
      bordered
      >
      <a-pagination position='top'>
      </a-pagination>
		</a-table>
		
    <a-card class="daily-article" >
		 单板详情
    </a-card>           
    <a-table
    	ref="table1"
			size="middle"
      :columns="innerColumns1"
      :dataSource="innerData1"
      :pagination="false"
      :loading="loading1"
      rowKey="id"
      @change="handleTableChange1"
      :expandedRowKeys="expandedRowKeys"
      @expand="handleExpand"
      bordered
      >
          <!--<a-card class="daily-article" >
		 			子卡详情
			    </a-card>           -->
			    <a-table
			    	style="margin: 0"
			    	slot="expandedRowRender"
        		slot-scope="record"
			    	ref="table2"
						size="middle"
			      :columns="innerColumns2"
			      :dataSource="innerData2"
			  		:pagination="false"
			      :loading="loading2"
			      @change="handleTableChange2"
			      rowKey="id"
			      >
			     
					</a-table>
      
		</a-table>
		

		
    <a-card class="daily-article" >
		 机框详情
    </a-card>           
    <a-table
    	ref="table3"
			size="middle"
      :columns="innerColumns3"
      :dataSource="innerData3"
			:pagination="false"
			@change="handleTableChange3"
      :loading="loading3"
      bordered
      rowKey="id"
      >
      <a-pagination position='top'>
      </a-pagination>      
		</a-table>		
  </a-modal>
</template>

<script>
	import { getAction,putAction } from '@/api/manage'
	  import { MuliListMixin } from '@/mixins/MuliListMixin'
  export default {
    name: "SysAnnouncementModal",
    mixins:[MuliListMixin],
    components: {
    },
    data () {
      return {
        title:"设备详情",
        record: {},
        innerData1: [],
        innerData2: [],
        innerData3: [],
        innerData4: [],
        ipagination1:{},
        ipagination2:{},
        ipagination3:{},
        ipagination4:{},
        expandedRowKeys:[],
        url: {
          boardInfolist: "/dev/devices/boardInfolist",
          suboardInfolist: "/dev/devices/suboardInfolist",
          chassisInfolist: "/dev/devices/chassisInfolist",
          interfaceInfolist: "/dev/devices/interfacelist",
          suboardlistByBid: "/dev/devices/suboardlistByBid",
        },        
        // 子表表头-单板
        innerColumns1: [
          {
            title: '序号',
            dataIndex: 'id',
            align: "center",
          },        
          {
            title: '单板类型',
            dataIndex: 'boardType',
            align: "center",
          },
          {
            title: '槽位号',
            dataIndex: 'slot',
            align: "center",
          },
          {
            title: '槽位状态',
            dataIndex: 'slotStatus',
            align: "center",
          },       
          {
            title: '单板名称',
            dataIndex: 'boardName',
            align: "center",
          },          
					{
            title: '单板版本',
            dataIndex: 'boardPcbVersion',
            align: "center",
          },
          {
            title: 'CPU使用率',
            dataIndex: 'cpuUsageRate',
            align: "center",
          },
          {
            title: '内存使用率',
            dataIndex: 'memUsageRate',
            align: "center",
          },
          {
            title: '内存使用大小',
            align: "center",
            //width: 100,
            dataIndex: 'memUsed',
            //key: 'itemText',
          },
          {
            title: '内存总大小',
            align: "center",
            dataIndex: 'memTotal',
          }
					,
          {
            title: 'SDRAM大小',
            align: "center",
            dataIndex: 'sdram',
          }
          ,
          {
            title: 'flash大小',
            align: "center",
            dataIndex: 'flash',
          }
          ,
          {
            title: 'nvram大小',
            align: "center",
            dataIndex: 'nvram',
          }
          ,
          {
            title: 'cfcard内存大小',
            align: "center",
            dataIndex: 'cfcardMem',
          }
          ,
          {
            title: '设备启动时间',
            align: "center",
            dataIndex: 'boardUpTime',
          }
          ,
          {
            title: '用户数',
            align: "center",
            dataIndex: 'userCount',
          }
          ,
          {
            title: 'IPV4用户',
            align: "center",
            dataIndex: 'ipv4UserCount',
          }          
          ,
          {
            title: 'IPV6用户',
            align: "center",
            dataIndex: 'ipv6UserCount',
          }   
          ,
          {
            title: 'MAC',
            align: "center",
            dataIndex: 'MAC',
          }             
          
        ],
        // 子表表头-子卡
        innerColumns2: [
          {
            title: '序号',
            dataIndex: 'id',
            align: "center",
          },        
          {
            title: '子卡名称',
            dataIndex: 'picname',
            align: "center",
          },
          {
            title: '子卡槽位号',
            dataIndex: 'picSlot',
            align: "center",
          },
          {
            title: '子卡版本号',
            dataIndex: 'picVersion',
            align: "center",
          }
          
        ],
        // 子表表头-机框
        innerColumns3: [
          {
            title: '序号',
            dataIndex: 'id',
            align: "center",
          },      
          {
            title: '机框类型',
            dataIndex: 'chassisType',
            align: "center",
          },
          {
            title: '机框名称',
            dataIndex: 'chassisName',
            align: "center",
          },
          {
            title: '设备类型',
            dataIndex: 'deviceType',
            align: "center",
          },
          {
            title: '电源大小',
            dataIndex: 'totalPower',
            align: "center",
          },
          {
            title: '需要电源大小',
            align: "center",
            //width: 100,
            dataIndex: 'needPower',
            //key: 'itemText',
          },
          {
            title: '当前电源大小',
            align: "center",
            dataIndex: 'remainPower',
          }


        ],      
        // 子表表头-接口
        innerColumns4: [
          {
            title: '序号',
            dataIndex: 'id',
            align: "center",
          },      
          {
            title: '接口名称',
            dataIndex: 'interfaceName',
            align: "center",
          },
          {
            title: '接口类型',
            dataIndex: 'interfaceType',
            align: "center",
          },
          {
            title: '接口槽位号',
            dataIndex: 'interfaceSlot',
            align: "center",
          },
          {
            title: '入口利用率',
            dataIndex: 'inUti',
            align: "center",
          },
          {
            title: '出口利用率',
            align: "center",
            //width: 100,
            dataIndex: 'outUti',
            //key: 'itemText',
          },
          {
            title: '物理口状态',
            align: "center",
            dataIndex: 'phyStatus',
          },
          {
            title: '协议口状态',
            align: "center",
            dataIndex: 'protocalStatus',
          }

        ],            
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        visible: false,
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        
        bodyStyle:{
          padding: "0",
          height:(window.innerHeight*0.8)+"px",
          "overflow-y":"auto",

        },
        modelStyle:{
          width: '60%',
          style: { top: '20px' },
          fullScreen: false
        }
      }
    },
    created () {
    	   
    },
    computed: {
 
    },
    methods: {
      detail (record) {
        this.visible = true;
        this.record = record;
        console.log(this.record);
     		this.showboardInfolist();
     		this.showchassisInfolist();
     		//this.showsuboardInfolist();
     		this.showinterfaceInfolist();
        //调用单板数据
      },
      handleCancel () {
        this.visible = false;
      },
      //获取单板列表
      showboardInfolist(){
      	
      	let params = {uid:this.record.userId,devid:this.record.id}//查询条件
      	this.queryParam=params;
      	console.log(params);
      	return new Promise((resolve) => {
      		//console.log(url);
          getAction(this.url.boardInfolist,params).then(res=>{
            if(res.success){
              let result = res.result
              if(Number(result.total)>0){
              	console.log("分页总数"+result.total)
                this.ipagination1.total = Number(result.total)
                console.log(res.result.records);
                this.innerData1 = (res.result.records)
                //this.columns=this.innerColumns1;
                this.url.list=this.url.boardInfolist;
                resolve()
              }else{
                this.ipagination1.total=0
                this.innerData1=[]
              }
            }else{
              this.$message.warning(res.message)
            }
            this.loading1 = false
          })
        })
      },
      //获取子卡列表
      showsuboardInfolist(){
      	
      	let params = {uid:this.record.userId,devid:this.record.id}//查询条件
      	console.log(params);
      	return new Promise((resolve) => {
      		//console.log(url);
          getAction(this.url.suboardInfolist,params).then(res=>{
            if(res.success){
              let result = res.result
              if(Number(result.total)>0){
                this.ipagination2.total = Number(result.total)
                console.log(res.result.records);
                this.innerData2 = (res.result.records)
                resolve()
              }else{
                this.ipagination2.total=0
                this.innerData2=[]
              }
            }else{
              this.$message.warning(res.message)
            }
            this.loading2 = false
          })
        })
      },           
      //获取机框列表
      showchassisInfolist(){
      	
      	let params = {uid:this.record.userId,devid:this.record.id}//查询条件
      	console.log(params);
      	return new Promise((resolve) => {
      		//console.log(url);
          getAction(this.url.chassisInfolist,params).then(res=>{
            if(res.success){
              let result = res.result
              if(Number(result.total)>0){
                this.ipagination3.total = Number(result.total)
                console.log(res.result.records);
                this.innerData3 = (res.result.records)
                resolve()
              }else{
                this.ipagination3.total=0
                this.innerData3=[]
              }
            }else{
              this.$message.warning(res.message)
            }
            this.loading3 = false
          })
        })
      },
      //获取接口列表interfaceInfolist
      showinterfaceInfolist(){
      	
      	let params = {uid:this.record.userId,devid:this.record.id}//查询条件
      	console.log(params);
      	return new Promise((resolve) => {
      		//console.log(url);
          getAction(this.url.interfaceInfolist,params).then(res=>{
            if(res.success){
              let result = res.result
              if(Number(result.total)>0){
                this.ipagination4.total = Number(result.total)
                console.log(res.result.records);
                this.innerData4 = (res.result.records)
                resolve()
              }else{
                this.ipagination4.total=0
                this.innerData4=[]
              }
            }else{
              this.$message.warning(res.message)
            }
            this.loading4 = false
          })
        })
      }, 
      getDataByResult(result){
        return result.map(item=>{
          //判断是否标记了带有子节点
          if(item[this.hasChildrenField]=='1'){
            let loadChild = { id: item.id+'_loadChild', devName: 'loading...', isLoading: true }
            item.children = [loadChild]
          }
          return item
        })
      },      
      /** 切换全屏显示 */
      handleClickToggleFullScreen() {
        let mode = !this.modelStyle.fullScreen
        if (mode) {
          this.modelStyle.width = '100%'
          this.modelStyle.style.top = '20px'
        } else {
          this.modelStyle.width = '60%'
          this.modelStyle.style.top = '50px'
        }
        this.modelStyle.fullScreen = mode
      },
      handleExpand(expanded, record){
      	//表展开事件
      	console.log(record);
        this.expandedRowKeys=[];
        this.innerData=[];
        if(expanded===true){
        	
        this.expandedRowKeys.push(record.id);	
        let params = {uid:this.record.userId,boardid:record.id}//查询条件
      	
      	return new Promise((resolve) => {
      		//console.log(url);
          getAction(this.url.suboardlistByBid,params).then(res=>{
            if(res.success){
              let result = res.result
              if(Number(result.total)>0){
                this.ipagination2.total = Number(result.total)
                console.log(res.result.records);
                this.innerData2 = (res.result.records)
                resolve()
              }else{
                this.ipagination2.total=0
                this.innerData2=[]
              }
            }else{
              this.$message.warning(res.message)
            }
            this.loading2 = false
          })
        })
        	

        }     	

        
      }      
    }
  }
</script>

<style lang="less">
  .announcementCustomModal{
    .ant-modal-header {
      border: none;
      display: inline-block;
      position: absolute;
      z-index: 1;
      right: 56px;
      padding: 0;
      .ant-modal-title{
        .custom-btn{
          width: 56px;
          height: 56px;
          border: none;
          box-shadow: none;
        }
      }
    }
    .daily-article{
      border-bottom: 0;
      color: #0000CC;
    }
  }
</style>
<style scoped lang="less">
  .daily-article {
    .article-button {
      font-size: 1.2rem !important;
    }
    .ant-card-body {
      padding: 18px !important;
    }
    .ant-card-head {
      padding: 0 1rem;
    }
    .ant-card-meta {
      margin-bottom: 1rem;
    }
    .article-content {
      p {
        word-wrap: break-word;
        word-break: break-all;
        text-overflow: initial;
        white-space: normal;
        font-size: .9rem !important;
        margin-bottom: .8rem;
      }
    }
  }
</style>
